<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="list">
        <li></li>
    </ul>
    <button>获取电影</button>
    <button>添加电影</button>
    <button>修改电影</button>
    <button>局部修改PATCH大写</button>
    <button>删除电影</button>
    <script>
        // 获取ul和按钮
        let ul = document.querySelector('ul');
        let btns = document.querySelectorAll('button');

        btns[0].onclick = async function() {
            // let p = await fetch('http://api.zhibao.com/movies');
            // // console.log(p);
            // let data = await p.json();
            // console.log(data);
            // let str = data.map(item => {
            //     return `<li>${item.name}</li>`;
            // }).join('');

            // let str = (await ((await fetch('http://api.zhibao.com/movies')).json())).map(item => `<li>${item.name}</li>`).join('')

            let str = await fetch('http://api.zhibao.com/movies').then(val => val.json().then(data => data.map(item => `<li>${item.name}</li>`).join('')))

            ul.innerHTML = str;
        }

        btns[1].onclick = function() {
            fetch('http://api.zhibao.com/movies', {
                method: "POST",
                headers: {
                    // 不支持驼峰改写
                    // "content-type": "application/x-www-form-urlencoded"
                    "content-type": "application/json"
                },
                // body: 'name=大话西游&director=周星驰&star=朱茵、莫文蔚'
                body: JSON.stringify({
                    name: "唐伯虎点秋香",
                    director: "王晶",
                    star: "周星驰，巩俐"
                })
            }).then(val => {
                console.log(val);
            })
        }

        btns[2].onclick = function() {
            fetch('http://api.zhibao.com/movies/7', {
                method: "put",
                headers: {
                    'content-type': "application/json"
                },
                body: JSON.stringify({
                    name: "功夫"
                })
            }).then(val => {
                console.log(val);
            })
        }

        btns[3].onclick = function() {
            fetch('http://api.zhibao.com/movies/9', {
                method: "PATCH",
                headers: {
                    'content-type': "application/json"
                },
                body: JSON.stringify({
                    name: "美人鱼"
                })
            }).then(val => {
                console.log(val.status);
            })
        }

        btns[4].onclick = function() {
            fetch('http://api.zhibao.com/movies/3', {
                method: "delete",
            }).then(val => {
                console.log(val.status);
            })
        }
    </script>
</body>

</html>